<template>
    <div>
        <a-auto-complete v-model:value="value" v-bind="$attrs" size="large" @search="handleSearch">
            <template #dataSource>
                <a-select-option v-for="email in result" :key="email">{{ email }}</a-select-option>
            </template>
        </a-auto-complete>
    </div>
</template>
<script lang="ts" setup>
import { ref, withDefaults, defineProps } from "vue";

/**
 * 组件参数
 */
interface IProps {
    /**
     * 绑定值
     */
    size: string;
}

const props = withDefaults(defineProps<IProps>(), {
    size: "default",
});

const value = ref("");
const result = ref<string[]>([]);
const handleSearch = (val: string) => {
    let res: string[];
    if (!val || val.indexOf("@") >= 0) {
        res = [];
    } else {
        res = ["gmail.com", "163.com", "qq.com"].map((domain) => `${val}@${domain}`);
    }
    result.value = res;
};
</script>
